import { animation_obj } from '../../../Css/Classes/cla_animation_obj';
import { global_duration_time } from '../../../DataDefine/sourceData';
import { appearEl_dataMana } from '../../appear_dom/Classes/cla_appearEl_dataMana';
import { Multiply_act } from '../../appear_dom/DataDefine/sourceData';
import type { typ_appear_Direct } from '../../appear_dom/Types';
import { getElementViewOffsetPosi } from '../../getElementViewOffsetPosi';

const disappearEl_operateTag = 'disappearEl_operate';

/**
 * 元素 消失 操作
 */
export class disappearEl_operate extends appearEl_dataMana {
  get [Symbol.toStringTag]() {
    return disappearEl_operateTag;
  }

  constructor(elt: HTMLElement, direct: typ_appear_Direct) {
    super(elt, direct);
  }

  setstaticCss(duration?: number) {
    let curEl_posi = getElementViewOffsetPosi(this.targetEl);
    // 最大 长度
    let maxWidth = curEl_posi.width;
    // 最大 高度
    let maxHeight = curEl_posi.height;

    /**
     * 动画 信息 集
     */
    let cur_animation_obj = new animation_obj();

    cur_animation_obj.name = this.disappearEl_anima_cla;

    cur_animation_obj.duration = duration || global_duration_time;

    // let curEl_style_obj = new fromToAnima_keyframeObj(this.targetEl);
    /** ${curEl_style_obj.toStringStyle()}*/

    let Multiply_act_direct = Multiply_act[this.direct];

    let ret = `
    .${cur_animation_obj.name} {
        ${cur_animation_obj.toCssString()}

        box-sizing: border-box;
        /**overflow: hidden;*/

        animation-name: ${cur_animation_obj.keyframeName} , 
        ${cur_animation_obj.name}_mar_top_keyframe        ,
        ${cur_animation_obj.name}_opacity                 ,
        ${cur_animation_obj.name}_font_size;

    }

    @keyframes ${cur_animation_obj.keyframeName}{
        0%{
            width: ${maxWidth}px;
            height: ${maxHeight}px;
        }
        100%{
            width: ${Multiply_act_direct[0] * maxWidth}px;
            height: ${Multiply_act_direct[1] * maxHeight}px;
        }
    }
    
    @keyframes ${cur_animation_obj.name}_mar_top_keyframe {   
        100%{
            margin: 0;
            padding: 0;
        }
    }
      
    @keyframes ${cur_animation_obj.name}_opacity {   
        100%{
            opacity: 0;
        }
    } 

    @keyframes ${cur_animation_obj.name}_font_size {   
        60%{
            font-size: 0px;
        }
        100%{
            font-size: 0px;
        }
    } 
    `;

    // console.log(ret);

    return ret;
  }
}
